import React, { useEffect, useState } from 'react';
import {
    AppstoreOutlined, MailOutlined, HighlightOutlined, AndroidOutlined, UserOutlined, AreaChartOutlined,
    SettingOutlined, ArrowsAltOutlined, ShrinkOutlined, LineChartOutlined, SlidersOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Layout, Menu, Breadcrumb, Dropdown, Space } from 'antd';
import { useNavigate, Outlet } from 'react-router-dom'
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux'; 
import './Index.scss'

interface Props {

}
function Index(props: Props) {

    const [adminname, setAdminname] = useState('');
    const [bian, setBian] = useState(false);
    var userInfo = useSelector((state: any) => state.userInfo)
    // console.log(userInfo.adminname); 
    useEffect(()=>{
        setAdminname(userInfo.adminname)
    },[])


    const [collapsed, setCollapsed] = useState(false);

    const Navigate = useNavigate()
    const { Sider, Content } = Layout;
    type MenuItem = Required<MenuProps>['items'][number];
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
        type?: 'group',
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
            type,
        } as MenuItem;
    };
    //退出登录
    var dispatch =useDispatch()

    var exit = () => {
        dispatch({ type: 'REMOVE_TOKEN' })

        Navigate('/login');
    }
    const dropmenuitems: any = [
        {
            key: '1',
            label: <a> 设置 </a>,
        },
        {
            key: '2',
            danger: true,
            label: <a onClick={() => { exit() }}> 退出登录 </a>
        }
    ];

    const items: MenuItem[] = [
        getItem('首页', '首页', <LineChartOutlined />, [
            getItem('首页', '/index/home'),
        ]),
        getItem('轮播图管理', '轮播图管理', <MailOutlined />, [
            getItem('轮播图列表', '/index/swiper'),
            getItem('增加轮播图', '/index/swiperadd'),
        ]),
        getItem('账号管理', '账号管理', <AppstoreOutlined />, [
            getItem('管理员列表', '/index/users'),

        ]),
        getItem('产品管理', '产品管理', <AndroidOutlined />, [
            getItem('产品列表', '/index/ProList'),
            getItem('产品秒杀', '/index/ProSeckill'),
            getItem('产品推荐', '/index/ProRecommend'),
            getItem('筛选列表', '/index/SearchPro'),
        ]),
        getItem('数据可视化', '数据可视化', <AreaChartOutlined />, [
            getItem('echarts使用', '/index/echarts'),

        ]),
        getItem('编辑器', '编辑器', <HighlightOutlined />, [
            getItem('富文本编辑器', '/index/edit'),

        ]),
        getItem('excel管理', 'excel管理', <SlidersOutlined />, [
            getItem('excel管理', '/index/excell'),

        ]),
        getItem('地图管理', '地图管理', <SettingOutlined />, [
            getItem('百度导航', '/index/map'),
        ]),
    ];


    //演示
    // var xuanxiang=[
    //     getItem('首页', '首页', <LineChartOutlined />, [
    //         getItem('首页', '/index/home'),
    //     ]),
    //     getItem('轮播图管理', '轮播图管理', <MailOutlined />, [
    //         getItem('轮播图列表', '/index/swiper'),
    //         getItem('增加轮播图', '/index/swiperadd'),
    //     ]),
    //     getItem('账号管理', '账号管理', <AppstoreOutlined />, [
    //         getItem('管理员列表', '/index/users'),

    //     ]),
    //     getItem('产品管理', '产品管理', <AndroidOutlined />, [
    //         getItem('产品列表', '/index/ProList'),
    //         getItem('产品秒杀', '/index/ProSeckill'),
    //         getItem('产品推荐', '/index/ProRecommend'),
    //         getItem('筛选列表', '/index/SearchPro'),
    //     ]),
    //     getItem('数据可视化', '数据可视化', <AreaChartOutlined />, [
    //         getItem('echarts使用', '/index/echarts'),

    //     ]),
    //     getItem('编辑器', '编辑器', <HighlightOutlined />, [
    //         getItem('富文本编辑器', '/index/edit'),

    //     ]),
    //     getItem('excel管理', 'excel管理', <SlidersOutlined />, [
    //         getItem('excel管理', '/index/excell'),

    //     ]),
    //     getItem('地图管理', '地图管理', <SettingOutlined />, [
    //         getItem('百度导航', '/index/map'),
    //     ]),
    // ];
    // var quanxian=useSelector((state: any) => state.userInfo.checkedkeys)
    // console.log('quanxian',quanxian);
    // if(quanxian){
    //     console.log('11111');
    //     let items: MenuItem[] = [
    //         getItem('首页', '首页', <LineChartOutlined />, [
    //             getItem('首页', '/index/home'),
    //         ]),
    //         getItem('轮播图管理', '轮播图管理', <MailOutlined />, [
    //             getItem('轮播图列表', '/index/swiper'),
    //             getItem('增加轮播图', '/index/swiperadd'),
    //         ]),
    //         getItem('账号管理', '账号管理', <AppstoreOutlined />, [
    //             getItem('管理员列表', '/index/users'),
    
    //         ]),
    //         getItem('产品管理', '产品管理', <AndroidOutlined />, [
    //             getItem('产品列表', '/index/ProList'),
    //             getItem('产品秒杀', '/index/ProSeckill'),
    //             getItem('产品推荐', '/index/ProRecommend'),
    //             getItem('筛选列表', '/index/SearchPro'),
    //         ]),
    //         getItem('数据可视化', '数据可视化', <AreaChartOutlined />, [
    //             getItem('echarts使用', '/index/echarts'),
    
    //         ]),
    //         getItem('编辑器', '编辑器', <HighlightOutlined />, [
    //             getItem('富文本编辑器', '/index/edit'),
    
    //         ]),
    //         getItem('excel管理', 'excel管理', <SlidersOutlined />, [
    //             getItem('excel管理', '/index/excell'),
    
    //         ]),
    //         getItem('地图管理', '地图管理', <SettingOutlined />, [
    //             getItem('百度导航', '/index/map'),
    //         ]),
    //     ];  
    // }else if(quanxian.indexOf("0-0-0")!= -1){
    //     let items: MenuItem[] = [
    //         getItem('轮播图管理', '轮播图管理', <MailOutlined />, [
    //             getItem('轮播图列表', '/index/swiper'),
    //             getItem('增加轮播图', '/index/swiperadd'),
    //         ]),
    //     ];
    //     setBian(true)
    // }




    const rootSubmenuKeys = [ '首页','轮播图管理', '账号管理', '产品管理', '数据可视化', '编辑器', 'excel管理', '地图管理'];
    const [openKeys, setOpenKeys] = useState(['']);
    const [biaoti, setbiaoti] = useState('')
    let dianjizicaidan = (e: any) => {
        //跳转对应页面的对应路由地址
        Navigate(e.key)
        console.log(e);
        //跳转对应页面的对应导航名字
        console.log(e.keyPath);
        setbiaoti(e.keyPath[1])
    }
    const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
        const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    var zhedie = () => {
        setCollapsed(!collapsed)
    }
    return (
        <div className='index'>
            <Layout>
                <Sider className='left' collapsed={collapsed}>
                    <div className='lttop'>
                        <span>头像</span><span>xx管理后台</span>
                    </div>
                    <div>
                        <Menu
                            mode="inline"
                            theme="dark"
                            openKeys={openKeys}
                            onOpenChange={onOpenChange}
                            style={{ width: '100%', fontSize: '16px', color: 'white' }}
                            items={items}
                            onClick={(e) => { dianjizicaidan(e) }}
                        />
                    </div>
                </Sider>
                <div className='right'>
                    <div className='top'>
                        <div onClick={() => { zhedie() }}>
                            {
                                collapsed ?
                                    <ArrowsAltOutlined /> :
                                    <ShrinkOutlined />
                            }
                        </div>
                        <div>
                            欢迎您:{adminname} &nbsp;
                            <Dropdown menu={{ items: dropmenuitems }}>
                                <div onClick={(e) => e.preventDefault()}>
                                    <Space>
                                        <UserOutlined />
                                    </Space>
                                </div>
                            </Dropdown>
                        </div>
                    </div>
                    <div className='down'>
                        <div className='down1'>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>首页</Breadcrumb.Item>
                                <Breadcrumb.Item>{biaoti}</Breadcrumb.Item>
                                <Breadcrumb.Item>嗨购</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='down2'>
                            <Content>
                                <Outlet />
                            </Content>
                        </div>
                    </div>
                </div>
            </Layout>
        </div>
    );
}

export default Index;